<template>
  <div class="form-page">
    <Card :bordered="false" :dis-hover="true">
      <p slot="title" style="color: #666">
        <span
          class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"
          style="font-size: 20px"
        ></span>
        添加模式
      </p>
      <p slot="extra" style="color: #999; font-size: 12px">
        <label style="color: #ff3b30">*</label> 为必填
      </p>
      <Form
        ref="formValidate"
        :model="bloc.model"
        :rules="ruleValidate"
        :label-width="150"
      >
        <FormItem label="模式名称：" prop="selfMotion" required>
          <Input v-model="bloc.model.selfMotion" style="width: 400px" />
        </FormItem>
        <FormItem label="模式英文名称：" prop="selfMotionEnglish" required>
          <Input v-model="bloc.model.selfMotionEnglish" style="width: 400px" />
        </FormItem>
        <FormItem label="自动程序编号：" prop="selfMotionId" required>
          <Input v-model="bloc.model.selfMotionId" style="width: 400px" />
        </FormItem>
      </Form>
      <div style="margin: 20px 0px 35px 25px">
        <Button style="width: 100px; height: 40px" @click="handleCancel()"
          >返回</Button
        >
        <Button
          style="margin-left: 30px; width: 100px; height: 40px"
          type="primary"
          @click="handleSubmit('formValidate')"
          >保存
        </Button>
      </div>
    </Card>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { AutomaticBloc } from "./AutomaticBloc";
import { store } from "@/store/Store";
import { baseUrl } from "@/base/Request";
import { Loading } from "@/base/Loading";
import { router } from "@/config/Router";
import HtmlEditor from '@/component/HtmlEditor.vue';


@Component({
  components: {HtmlEditor}
})
export default class extends Vue {
  @Prop({ type: Number })
  readonly init!: number;
  bloc = new AutomaticBloc();
  btnload = new Loading();
  
  formValidate: any = {
    type: "",
    switch: true,
  };
  ruleValidate: any = {
    selfMotion: [
      { required: true, message: "程序名称不能为空", trigger: "blur" },
    ],
    selfMotionEnglish: [
      { required: true, message: "程序英文名不能为空", trigger: "blur" },
    ],
    selfMotionId: [
      { required: true, message: "程序编号不能为空", trigger: "blur" },
    ],
  };
  $refs!: {
    formValidate: HTMLFormElement;
  };

  handleSubmit(name) {
    this.$refs[name].validate((valid) => { 
      this.bloc.model.deviceModelId = this.$route.query.id;
      if (valid) {
        this.bloc
          .addSeftMotion(
            this.bloc.model.selfMotion,
            this.bloc.model.selfMotionEnglish,
            this.bloc.model.selfMotionId,
            this.bloc.model.deviceModelId,
          )
          .then((res) => {
            this.$Message.success("保存成功");
            this.$router.push({
              path: "/device/nav/program/" + this.$route.query.id,
              query: { sortId: this.$route.query.sortId },
            });
            if (res.message !== "") {
              this.$Message.error(res.message);
            }
          })
          .catch((err) => {
            this.$Message.error(err.message);
            // this.$Message.error("保存失败");
          })
      }
    });
  }

  handleCancel() {
    this.$router.push({
      path: "/device/nav/program/" + this.$route.query.id,
      query: { sortId: this.$route.query.sortId },
    });
  }

}
</script>
<style lang="less" scoped>
.top {
  height: 50px;
  width: 100%;
  border-bottom: 1px solid rgba(204, 204, 204, 1);
  font-size: 18px;
  line-height: 50px;
}

/deep/ .ivu-form-item-content {
  display: flex !important;
  justify-content: start !important;
  align-items: center !important;
}
</style>
